<template>
  <div class="activityPage">
    <div class="searchBox bgfff">
      <el-form
        :inline="true"
        :model="form"
        ref="formRef"
        class="demo-form-inline"
        size="small"
      >
        <el-row justify="space-between">
          <el-col :span="6">
            <el-form-item label="活动类型：" prop="type">
              <el-select v-model="form.type" placeholder="活动类型">
                <el-option label="全部" value="0"></el-option>
                <el-option
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                  v-for="(item, index) in typeList"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="上下架状态：" prop="status">
              <el-select v-model="form.status" placeholder="上下架状态">
                <el-option label="全部" value="0"></el-option>
                <el-option label="上架" value="1"></el-option>
                <el-option label="下架" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="活动标题：" prop="name">
              <el-input v-model="form.name" placeholder="活动标题"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="primary" size="small" @click="onSubmit"
                >查询</el-button
              >
              <el-button @click="resetForm('formRef')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tablesCard bgfff">
      <div class="tablesCardTop">
        <div class="totalTxt">活动总数: {{ total }}</div>
        <el-button
          type="primary"
          size="small"
          @click="
            () => {
              this.actId = '';
              addActivityShow = true;
            }
          "
          >新增</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        size="small"
        height="580"
        style="width: 100%"
      >
        <el-table-column prop="_code" label="序号" width="60" align="center">
        </el-table-column>
        <el-table-column prop="type" label="活动类型" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.type | activityTypeTxt }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="活动标题"
          align="center"
          width="200"
        />
        <el-table-column
          prop="address"
          label="活动地点"
          align="center"
          width="300"
        />
        <el-table-column
          prop="time"
          label="活动时间"
          align="center"
          width="270"
        >
          <template slot-scope="scope">
            {{ scope.row.begin_time }}~{{ scope.row.end_time }}
          </template>
        </el-table-column>
        <el-table-column
          prop="sing_end_time"
          label="报名截止时间"
          align="center"
          width="160"
        />
        <el-table-column
          prop="point_num"
          label="活动积分"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <div style="color: #1890ff">
              系统积分{{ scope.row.point_num }}/人
            </div>
            <div style="color: #1890ff">
              荣誉积分{{ scope.row.honor_point_num }}/人
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="person_num_limit"
          label="活动人数上限"
          align="center"
          width="110"
        />
        <el-table-column
          prop="report_num"
          label="已报名人数"
          align="center"
          width="100"
        />
        <el-table-column
          prop="sign_num"
          label="已签到人数"
          align="center"
          width="100"
        />
        <el-table-column
          prop="status"
          label="上架状态"
          align="center"
          width="80"
        >
          <template slot-scope="scope">
            <span style="color: #1890ff">{{
              scope.row.status == 1 ? "上架" : "下架"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          prop=""
          label="操作"
          align="center"
          width="190"
        >
          <template slot-scope="scope">
            <div class="">
              <el-link type="primary" @click="onBtns(1, scope.row)"
                >查看</el-link
              >
              <el-divider direction="vertical"></el-divider>
              <el-link
  
                type="primary"
                @click="onBtns(2, scope.row)"
                >编辑</el-link
              >
              <el-divider direction="vertical"></el-divider>
              <el-popover
                :ref="`popover1-${scope.row.id}`"
                popper-class="myPopover"
                placement="left"
                width="160"
                trigger="click"
              >
                <p class="text">
                  <i class="el-icon el-icon-warning"></i>
                  {{ scope.row.status == 1 ? "是否确认下架" : "是否确认上架" }}
                </p>
                <div class="btnBox">
                  <el-button
                    size="mini"
                    @click="$refs[`popover1-${scope.row.id}`].doClose()"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="onBtns(3, scope.row)"
                    >确定</el-button
                  >
                </div>
                <el-link type="primary" slot="reference">{{
                  scope.row.status == 1 ? "下架" : "上架"
                }}</el-link>
              </el-popover>
              <el-divider direction="vertical"></el-divider>
              <el-popover
                :ref="`popover-${scope.row.id}`"
                popper-class="myPopover"
                placement="left"
                width="160"
                trigger="click"
              >
                <p class="text">
                  <i class="el-icon el-icon-warning"></i>
                  是否确认删除？
                </p>
                <div class="btnBox">
                  <el-button
                    size="mini"
                    @click="$refs[`popover-${scope.row.id}`].doClose()"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="onBtns(4, scope.row)"
                    >确定</el-button
                  >
                </div>
                <el-link type="danger" slot="reference">删除</el-link>
              </el-popover>
              <el-link
                type="primary"
                @click="onBtns(5, scope.row)"
                v-if="scope.row.is_can_cancel == 1"
                >{{
                  scope.row.is_cancel == 2 ? "取消活动" : "重新发布"
                }}</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBlock">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :current-page.sync="form.page"
          :page-size="form.limit"
          @size-change="
            (e) => {
              form.limit = e;
              getList();
            }
          "
          @current-change="
            (e) => {
              form.page = e;
              getList();
            }
          "
        >
        </el-pagination>
      </div>
    </div>
    <addActivity
      v-if="addActivityShow"
      @handleClose="
        (val) => {
          addActivityShow = false;
          if (val) getList();
        }
      "
      :dialogVisible="addActivityShow"
      :add_Or_edit="add_Or_edit"
      :id="actId"
    ></addActivity>
    <activeDetail
      v-if="activeDetailShow"
      @handleClose="activeDetailShow = false"
      :dialogVisible="activeDetailShow"
      :id="actId"
    ></activeDetail>
  </div>
</template>

<script>
import addActivity from "./common/addActivity.vue";
import activeDetail from "./common/activeDetail.vue";
import {
  activeList,
  getActiveTypes,
  activeUpStatus,
  activeCancel,
  delActiveCancel,
} from "@/api/activity.js";
export default {
  name: "",
  props: [""],
  filters: {
    activityTypeTxt(type) {
      let txt = "";
      switch (type) {
        case 1:
          txt = "邻里活动";
          break;
        case 2:
          txt = "达人活动";
          break;
        case 3:
          txt = "社团活动";
          break;
        case 4:
          txt = "志愿活动";
          break;
        case 5:
          txt = "党建活动";
          break;
      }
      return txt;
    },
  },
  data() {
    return {
      typeList: {},
      form: {
        type: "",
        status: "",
        name: "",
        page: 1,
        limit: 10,
      },
      tableData: [],
      addActivityShow: false,
      add_Or_edit: "add",
      total: 0,
      activeDetailShow: false,
      actId: "",
    };
  },


    

  components: { addActivity, activeDetail },

  computed: {},

  beforeMount() {},

  mounted() {
    this.getActiveTypes();
    this.getList();
  },

  methods: {
    getActiveTypes() {
      getActiveTypes().then((res) => {
        this.typeList = res.data.list;
      });
    },
    onSubmit() {
      this.form.page = 1;
      this.getList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.form.page = 1;
      this.getList();
    },
    getList() {
      activeList(this.form).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.count;
        }
      });
    },
    onBtns(val, row) {
      this.actId = row.id;
      if (val == 1) {
        //查看
        this.activeDetailShow = true;
      } else if (val == 2) {
        //编辑
        this.addActivityShow = true;
        this.add_Or_edit = "edit";
      } else if (val == 3) {
        this.$refs[`popover1-${row.id}`].doClose();
        let status = "";
        if (row.status == 1) {
          status = 2;
        } else {
          status = 1;
        }
        //上架,下架
        activeUpStatus({
          id: this.actId,
          status,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.getList();
          }
        });
      } else if (val == 4) {
        this.$refs[`popover-${row.id}`].doClose();

        //删除
        delActiveCancel({
          id: this.actId,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.getList();
          }
        });
      } else if (val == 5) {
        if (row.is_cancel == 2) {
          //取消活动
          this.$prompt("请输入取消原因", "", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
          })
            .then(({ value }) => {
              activeCancel({
                id: row.id,
                is_cancel: 1,
                cancel_content: value,
              }).then((res) => {
                if (res.code == 200) {
                  this.$message({
                    type: "success",
                    message: res.msg,
                  });
                  this.getList();
                }
              });
            })
            .catch(() => {});
        } else {
          // 重新发布
          activeCancel({
            id: row.id,
            is_cancel: 2,
          }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.getList();
            }
          });
        }
      }
    },
    notEdit(time) {
      const activityStart = this.$moment(time, "YYYY-MM-DD HH:mm:ss").unix();
      const nowTime = this.$moment().unix();
      if (nowTime > activityStart) {
        return true;
      } else {
        return false;
      }
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.activityPage {
  .searchBox {
    margin-bottom: 14px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 120px;
    /deep/.el-form-item {
      margin-bottom: 0;
      .el-input__inner {
        width: 200px;
      }
    }
  }
  .tablesCard {
  }
}
</style>
